<template>
    <view class="wai">
        <view class="wai-top">
            <view class="prices">
                <image class="image" src="@/static/prices.png" mode=""></image>
                <view>待支付</view>
            </view>
            <view class="daojishi">
                {{ formattedCountdown }}
            </view>
        </view>
        <view class="center">
            <view @click="shopDetas1(orderData.shop?.id)" class="center-top1">
                <image class="img" :src="orderData.shop?.logo" mode=""></image>
                <view class="">{{ orderData.shop?.name }}</view>
            </view>
            <view @click="shopDetas2(it)" class="box-list1" v-for="it in orderData.items" :key="it.id">
                <image class="list1-left" :src="it.goods_image" mode=""></image>
                <view class="list1-right">
                    <view class="right1">{{ it.goods_title }}</view>
                    <view class="right2">{{ it.goods_sku_text }}</view>
                    <view class="right3">
                        <view class="box-zuo">
                            <view class="zuo1">￥{{ it.goods_price }}</view>
                        </view>
                        <view class="box-you">×{{ it.goods_num }}</view>
                    </view>
                </view>
            </view>
            <view class="zongjia zongjia1">
                <view>商品总价</view>
                <view>￥{{ orderData.pay_fee }}</view>
            </view>
            <view class="zongjia zongjia2">
                <view>抵扣券</view>
                <view class="dikou">-￥{{ orderData.voucher }}</view>
            </view>
            <view class="zongjia">
                <view>合计总价</view>
                <view>￥{{ orderData.remain_pay_fee }}</view>
            </view>
        </view>
        <!-- 下单时间 -->
        <view class="placeOrder">
            <view class="placeOrder-box">
                <view>下单时间：</view>
                <view class="time-order">{{ orderData.createtime }}</view>
            </view>
            <view class="placeOrder-box">
                <view>订单编号：</view>
                <view class="time-order">{{ orderData.order_sn }}</view>
            </view>
        </view>
        <!-- 底部 -->
        <view class="footer">
            <view class="left3" @click="cancles">取消支付</view>
            <view class="leftend" @click="isshow = true">立即支付</view>
        </view>
    </view>
    <!-- 支付弹出层 -->
    <wd-popup v-model="isshow" position="bottom" @close="handleClose" custom-style="border-radius:15rpx;">
        <view class="popup">
            <view class="top">
                支付金额
                <text class="mony">¥</text>
                <text class="txt">{{ orderData.remain_pay_fee }}</text>
            </view>
            <checkbox-group>
                <view class="conter">
                    <view>请选择支付方式</view>
                    <view class="flex">
                        <view class="left">
                            <image class="flex-img" src="@/static/voucher.png" mode=""></image>
                            <view>抵用卷</view>
                            <view class="balance">（剩余¥{{ voucher }}）</view>
                        </view>
                        <checkbox @click="isWeChat('noweChat')" :checked="watch1 == 'noweChat'" class="red round" value="cb" style="transform: scale(0.8)" />
                    </view>
                    <view class="box-btm">
                        <view class="btm-left">
                            <image class="img" src="@/static/weChat.png" mode=""></image>
                            <view>微信支付</view>
                        </view>
                        <checkbox @click="isWeChat('weChat')" :checked="watch1 == 'weChat'" class="red round" value="cb" style="transform: scale(0.8)" />
                    </view>
                </view>
            </checkbox-group>
            <view class="btn" @click="btn">确认支付</view>
        </view>
    </wd-popup>
    <wd-popup v-model="isPass" position="bottom" @close="handleClose" custom-style="border-radius:15rpx;padding-top:30rpx">
        <view class="passwoed">
            <wd-password-input v-model="passWord" :focused="isPass" @focus="showKeyboard = true" />
        </view>
        <wd-number-keyboard v-model="passWord" v-model:visible="isPass" :maxlength="6" @blur="isPass = false" />
    </wd-popup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { utils } from '@/utils/utils.js';
import { getOrderDetails, cancelOrder, user, getWechat } from '@/api/index.js';
import { ref, computed, onMounted, watch } from 'vue';
const format = ref('mm 分 ss 秒');
const id = ref(''); //其他页面传来的参数，用来获取订单详情
const isshow = ref(false); //支付弹窗
const orderData = ref({}); //订单详情数据
const voucher = ref(null); //抵用券
const watch1 = ref(null); //支付方式
const isPass = ref(false); //输入密码弹出层
const passWord = ref(''); //支付密码
onLoad(async (options) => {
    if (options.id) {
        id.value = options.id;
    }
    await getOrder();
    userInfo();
});

// 倒计时
const formattedCountdown = computed(() => {
    const expiryDate = new Date(orderData.value.ext?.expired_time * 1000); //过期时间
    const countdown = ref(expiryDate.getTime() - Date.now()); // 当前剩余时间（毫秒）
    const totalSeconds = Math.floor(countdown.value / 1000);
    const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
    const seconds = String(totalSeconds % 60).padStart(2, '0');
    const interval = setInterval(() => {
        countdown.value = expiryDate.getTime() - Date.now();
    }, 1000);
    return `${minutes}分${seconds}秒后自动取消`;
});
// 立即支付
const btn = async () => {
    if (watch1.value == null) return utils('请选择支付方式');
    // 微信支付
    if (watch1.value == 'weChat') {
        const parms = ref({
            payment: 'wechat',
            order_sn: orderData.value.order_sn
        }); //支付参数
        const ret = await getWechat(parms.value);
        if (ret.code == 1) {
            console.log('成功', ret);
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: ret.data.pay_data.timeStamp,
                nonceStr: ret.data.pay_data.nonceStr,
                package: ret.data.pay_data.package,
                signType: ret.data.pay_data.signType,
                paySign: ret.data.pay_data.paySign,
                success: function (res) {
                    uni.navigateBack({
                        delta: 1
                    });
                    utils('支付成功');
                },
                fail: function (err) {
                    utils('支付失败');
                }
            });
        } else {
            utils(ret.msg);
        }
        console.log('微信支付');
    }
    // 抵用券支付
    if (watch1.value == 'noweChat') {
        isPass.value = true;
    }
    console.log('数据', orderData.value);
};
// 监听输入的密码
watch(
    passWord,
    async (newProps, oldProps) => {
        if (newProps.length == 6) {
            if (voucher.value >= orderData.value.remain_pay_fee) {
                const parms = ref({
                    payment: 'voucher',
                    order_sn: orderData.value.order_sn,
                    password: passWord.value
                });
                const ret = await getWechat(parms.value);
                if (ret.code == 1) {
                    uni.navigateBack({
                        delta: 1
                    });
                    utils(ret.msg);
                } else {
					if(ret.msg=="请先设置支付密码"){
						uni.navigateTo({
							url:'/pages/sub/passwordReset'
						})
					}
                    utils(ret.msg);
                    isPass.value = false;
                }
                console.log('抵用券支付', voucher.value);
            } else {
                const parms = ref({
                    payment: 'wechat',
                    order_sn: orderData.value.order_sn,
                    password: passWord.value,
                    voucher: voucher.value
                }); //支付参数
                const ret = await getWechat(parms.value);
                if (ret.code == 1) {
                    console.log('成功', ret);
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: ret.data.pay_data.timeStamp,
                        nonceStr: ret.data.pay_data.nonceStr,
                        package: ret.data.pay_data.package,
                        signType: ret.data.pay_data.signType,
                        paySign: ret.data.pay_data.paySign,
                        success: function (res) {
                            uni.navigateBack({
                                delta: 1
                            });
                            utils('支付成功');
                        },
                        fail: function (err) {
                            utils('支付失败');
                        }
                    });
                } else {
                    utils(ret.msg);
                }
                // 混合支付
                console.log('混合支付', voucher.value);
            }
        }
    },
    { immediate: false, deep: false }
);
// 监听弹出框把密码置空
watch(
    isPass,
    (newProps, oldProps) => {
        if (!isPass.value) {
            passWord.value = '';
        }
    },
    { immediate: false, deep: false }
);
// 点击取消支付
const cancles = async () => {
    const ret = await cancelOrder(id.value);
    if (ret.code == 1) {
        uni.redirectTo({
            url: '/pages/sub/myOrder'
        });
    } else {
        utils();
    }
};
// 获取订单详情
const getOrder = async () => {
    const ret = await getOrderDetails(id.value);
    if (ret.code == 1) {
        orderData.value = ret.data;
    } else {
        utils();
    }
    console.log(222, ret.data);
};
//点击店铺跳转店铺详情
const shopDetas1 = (id) => {
    uni.navigateTo({
        url: `/pages/sub/details?ids=${id}`
    });
};
//点击店铺商品跳转商品详情
const shopDetas2 = (it) => {
    uni.navigateTo({
        url: `/pages/sub/shopDetails?ids=${it.goods_id}`
    });
};
// 获取用户信息
const userInfo = async () => {
    const ret = await user();
    if (ret.code == 1) {
        voucher.value = ret.data.voucher;
    } else {
        utils('数据加载失败！');
    }
};
// 选择支付方式
const isWeChat = (value) => {
    watch1.value = value;
};
</script>

<style lang="scss" scoped>
.passwoed {
    position: fixed;
    top: 30%;
    left: 0;
    width: 100%;
}
// 支付弹窗
.popup {
    .btn {
        color: #ffffff;
        font-size: 32rpx;
        width: 670rpx;
        height: 98rpx;
        line-height: 98rpx;
        background: #f8bb4f;
        text-align: center;
        border-radius: 20rpx;
        margin: 180rpx auto 20rpx;
    }
    .conter {
        .box-btm {
            .btm-left {
                display: flex;
                align-items: center;
            }
            .img {
                width: 52rpx;
                height: 45rpx;
                margin-right: 14rpx;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 32rpx;
            color: #32394b;
            font-size: 30rpx;
        }
        .flex {
            .left {
                .balance {
                    color: #4e576e;
                }
                .flex-img {
                    width: 48rpx;
                    height: 42rpx;
                    margin-right: 14rpx;
                }
                display: flex;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 108rpx;
            border-bottom: solid 2rpx #dfe3e7;
            color: #32394b;
            font-size: 30rpx;
        }
        padding: 38rpx 24rpx 0 24rpx;
        font-size: 32rpx;
    }
    .top {
        .mony {
            color: #ff9b29;
            margin-left: 16rpx;
        }
        .txt {
            color: #ff9b29;
            font-size: 64rpx;
        }
        text-align: center;
        height: 182rpx;
        line-height: 182rpx;
        color: #32394b;
        font-size: 32rpx;
        border-bottom: solid 20rpx #f6f8fa;
    }
}
.wai {
    //底部
    .footer {
        .leftend {
            color: #ffffff;
            padding: 10rpx 20rpx;
            border-radius: 50rpx;
            background: linear-gradient(85deg, #ff9a01 0%, #ffb901 100%);
        }
        .left3 {
            border: 2rpx solid #999999;
            padding: 10rpx 20rpx;
            border-radius: 50rpx;
            color: #999999;
            margin-right: 60rpx;
        }
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100rpx;
        background-color: #fff;
        padding: 18rpx 48rpx 18rpx 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    // 下单时间
    .placeOrder {
        .placeOrder-box {
            .time-order {
                color: #666666;
            }
            display: flex;
            align-items: center;
            margin-bottom: 44rpx;
        }
        .boxx {
            margin-bottom: 0;
        }
        padding: 36rpx 0 30rpx 24rpx;
        background-color: #fff;
        border-radius: 30rpx;
        margin-top: 24rpx;
    }
    // 订单详情·
    .center {
        .zongjia2 {
            .dikou {
                color: #f6260a;
                font-size: 28rpx;
            }
            margin-top: 14rpx;
            margin-bottom: 28rpx;
        }
        .zongjia1 {
            margin-top: 34rpx;
        }
        .zongjia {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .box-list1 {
            .list1-right {
                .box-you {
                    color: #999999;
                    font-size: 28rpx;
                    font-weight: 700;
                }
                .right3 {
                    .box-zuo {
                        .zuo1 {
                            font-weight: 700;
                        }
                        display: flex;
                        align-items: center;
                        position: relative;
                    }
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 46rpx;
                }
                .right2 {
                    color: #999999;
                    font-size: 24rpx;
                    margin-top: 12rpx;
                }
                .right1 {
                    font-size: 30rpx;
                }
                width: 518rpx;
            }
            .list1-left {
                width: 160rpx;
                height: 160rpx;
                margin-right: 16rpx;
            }
            display: flex;
            height: 208rpx;
            padding: 20rpx 14rpx 14rpx 24rpx;
        }
        .center-top1 {
            .img {
                width: 60rpx;
                height: 60rpx;
                margin-right: 16rpx;
            }
            display: flex;
            align-items: center;
            font-size: 30rpx;
            margin-left: 8rpx;
            margin-bottom: 30rpx;
        }
        background-color: #fff;
        border-radius: 30rpx;
        padding: 22rpx 14rpx 20rpx 24rpx;
    }
    // 顶部
    .wai-top {
        .daojishi {
            display: flex;
            height: 50rpx;
            align-items: center;
            font-size: 24rpx;
            color: #f8bb4f;
        }
        .prices {
            .image {
                width: 50rpx;
                height: 50rpx;
                margin-right: 18rpx;
            }
            display: flex;
            height: 50rpx;
            align-items: center;
            color: #f8bb4f;
        }
        display: flex;
        justify-content: space-between;
        padding-top: 70rpx;
        height: 170rpx;
        // background-color: #ffe8bf;
        background: linear-gradient(to bottom, #ffe8bf, #faf3e6);
        padding-left: 44rpx;
        padding-right: 16rpx;
    }
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 200rpx;
}
</style>
